<script setup>
import { onMounted, ref, onUnmounted, reactive } from "vue";
import moment from "moment";
import { ElMessage } from "element-plus";
const leftTimeArray = ref([]);
const rightTimeArray = ref([]);
const modalVisible = reactive({
  closeTime: "23:00:00",
  creatorId: "0",
  name: "111编辑请问",
  remark:
    "遵守国家保密法律法规和公安机关有关信息化合作安 全保密要求， 自觉履行安全保密责任和义务，认真执行保护公 安网络和数据安全的技术管控要求危害公安网络安全的活动，包括在公安信息系统中 留存后门、木马和非遵守国家保密法律法规和公安机关有关信息化合作安 全保密要求， 自觉履行安全保密责任和义务，认真执行保护公 安网络和数据安全的技术管控要求危害公安网络安全的活动，包括在公安信息系统中 留存后门、木马和非遵守国家保密法律法规和公安机关有关信息化合作安 全保密要求， 自觉履行安全保密责任和义务，认真执行保护公 安网络和数据安全的技术管控要求危害公安网络安全的活动，包括在公安信息系统中 留存后门、木马和非遵守国家保密法律法规和公安机关有关信息化合作安 全保密要求， 自觉履行安全保密责任和义务，认真执行保护公 安网络和数据安全的技术管控要求危害公安网络安全的活动，包括在公安信息系统中 留存后门、木马和非遵守国家保密法律法规和公安机关有关信息化合作安 全保密要求， 自觉履行安全保密责任和义务，认真执行保护公 安网络和数据安全的技术管控要求危害公安网络安全的活动，包括在公安信息系统中 留存后门、木马和非",
  id: "197760298051346432",
  openTime: "08:00:00",
  allowDuplicates: 0,
  meetTime: [],
  capacity: 12312,
  tags: "",
  visible: true,
  createTime: "2022-09-21 13:59:24",
  tagIds: "",
  type: 1,
});
const timeArea = reactive({ start: "", end: "" });
const thismoment = reactive({
  moment: "2023-05-16",
  str: "2023-05-16周二",
});

//生成时间段数组
const creatTime = (startT, endT, interval) => {
  let starTime = moment(startT, "HH:mm");
  let endTime = moment(endT, "HH:mm");
  let diff = endTime.diff(starTime, "minutes");
  let num = Math.ceil(diff / interval);
  var segs = [];
  for (let i = 1; i <= num; i++) {
    let timeFrom = starTime.clone().add((i - 1) * interval, "minutes");
    let timeTo = starTime.clone().add(i * interval, "minutes");
    let minutes = timeFrom.minutes();
    let hour = timeFrom.hour();
    segs.push({
      timeFromtt: timeFrom.format("HH:mm"),
      timeTott: timeTo.format("HH:mm"),
      timeFrom: timeFrom,
      timeTo: timeTo,
      seg: minutes === 0 ? true : false,
      // title: (hour < 12 ? "上午" : "下午") + hour + '点'
      title: hour + ":00",
    });
  }
  return segs;
};

//弹窗内选择时间
const handleChooseTime = (row) => {
  let opentime = "";
  //过去的的时间不可选
  let momstart = moment(
    //当前会议室开始时间
    thismoment.moment + " " + modalVisible.openTime,
    "YYYY-MM-DD HH:mm"
  );
  if (moment().isAfter(momstart)) {
    opentime = moment();
  } else {
    opentime = moment(modalVisible.openTime, "HH:mm");
  }

  //是否选择的可预订的时间段
  if (
    row.timeFrom.isBefore(opentime) ||
    row.timeFrom.isAfter(moment(modalVisible.closeTime, "HH:mm")) ||
    row.timeTo.isAfter(moment(modalVisible.closeTime, "HH:mm"))
  ) {
    ElMessage.error("请选择可预定的时间段");
    return;
  }

  //得到选择后的时间段
  let array = { ...timeArea };
  if (!timeArea.start) {
    array = {
      start: row.timeFromtt,
      end: row.timeTott,
    };
  } else if (timeArea.start) {
    if (moment(timeArea.start, "HH:mm").isAfter(row.timeFrom)) {
      array = {
        start: row.timeFromtt,
        end: timeArea.end,
      };
    } else {
      array = {
        start: timeArea.start,
        end: row.timeTott,
      };
    }
  }

  //判断时间段是否可用
  let _value = { ...modalVisible };
  let pass = true;
  _value.meetTime.forEach((item, index) => {
    if (modalVisible.isexit && item.meeting_id == modalData.meetingId) return;
    let time_used = [
      moment(item.start_time, "HH:mm"),
      moment(item.end_time, "HH:mm"),
    ];
    //占用时间段的开始时间在点击的时间段起始时间之前并且占用的结束时间在点击时间的开始时间之前 || 占用时间段的开始时间与时间条的相等
    if (
      (time_used[0].isBefore(row.timeFrom) &&
        time_used[1].isAfter(row.timeFrom)) ||
      (time_used[0].isSame(row.timeFrom) && time_used[1].isAfter(row.timeFrom))
    ) {
      ElMessage.error("当前时间段已被选择");
      pass = false;
    }
    if (
      moment(array.start, "HH:mm").isBefore(time_used[0]) &&
      moment(array.end, "HH:mm").isAfter(time_used[1])
    ) {
      ElMessage.error("当前选择的时间段内有时间段已被选择");
      pass = false;
    }
  });

  //点击中间的条
  if (
    row.timeTo.isBefore(moment(timeArea.end, "HH:mm")) &&
    row.timeFrom.isAfter(moment(timeArea.start, "HH:mm"))
  ) {
    array = {
      start: row.timeFromtt,
      end: row.timeTott,
    };
  }

  //点击同一个条
  if (row.timeTott == timeArea.end && row.timeFromtt == timeArea.start) {
    array = {
      start: "",
      end: "",
    };
  }
  if (pass) {
    timeArea.start = array.start;
    timeArea.end = array.end;
  }
};

// 用于控制时间条样式
const renderTimerClass = (thisitem) => {
  let boxclass = "";
  let dom = null;
  let _value = { ...modalVisible };

  //得到会议室可用时间 openTime closeTime
  //已经过去的时间不可选
  let momstart = moment(
    //当前会议室开始时间
    thismoment.moment + " " + modalVisible.openTime,
    "YYYY-MM-DD HH:mm"
  );

  let nowTime = moment();

  if (moment().isAfter(momstart)) {
    if (nowTime >= thisitem.timeFrom && nowTime < thisitem.timeTo) {
      _value.openTime = thisitem.timeFrom;
    } else {
      _value.openTime = nowTime;
    }
  } else {
    _value.openTime = moment(modalVisible.openTime, "HH:mm");
  }
  _value.closeTime = moment(modalVisible.closeTime, "HH:mm");

  //根据被选择的时间段返回相应颜色与文字
  //已经被占用的时间段
  _value.meetTime?.forEach((item, index) => {
    if (modalVisible.isexit && item.meeting_id == modalVisible.meetingId)
      return;
    let time_used = [
      moment(item.start_time, "HH:mm"),
      moment(item.end_time, "HH:mm"),
    ];
    //被使用的时间段返回灰色，边框颜色改变
    if (
      time_used[0].isBefore(thisitem.timeTo) &&
      time_used[1].isAfter(thisitem.timeFrom)
    ) {
      boxclass = "usecolor usecolor-border";
    }

    //会议室占用情况文字显示，显示在第一个时间条上
    if (
      (time_used[0].isBefore(thisitem.timeTo) &&
        time_used[0].isAfter(thisitem.timeFrom)) || //结束时间在时间段之内或者结束时间等于时间段开始时间
      time_used[0].isSame(thisitem.timeFrom)
    ) {
      // dom = (
      //   <div className="text-dom">
      //     <label htmlFor="">
      //       {item.creator_name}（{time_used[0].format("HH:mm")}-
      //       {time_used[1].format("HH:mm")}）：
      //     </label>
      //     <span title={item.title}>{item.title}</span>
      //   </div>
      // );
    }
  });

  //优先返回被使用的时间段
  if (boxclass === "usecolor usecolor-border") {
    return { class: boxclass, text: dom || "" };
  }

  // 可使用的时间段颜色
  // 开始时间在会议室可用之间之后，并且在关闭时间之前
  // 开始时间在当前时间条之间
  // console.log(_value.openTime.format('YYYY-MM-DD HH:mm:ss'))
  if (
    _value.openTime.isSameOrBefore(thisitem.timeFrom) &&
    _value.closeTime.isAfter(thisitem.timeFrom)
    // (_value.openTime.isSameOrAfter(thisitem.timeFrom) &&
    //   _value.openTime.isSameOrBefore(thisitem.timeTo))
  ) {
    boxclass = "green";
  }

  //当前选择的时间段颜色
  if (
    moment(timeArea.start, "HH:mm").isBefore(thisitem.timeTo) &&
    moment(timeArea.end, "HH:mm").isAfter(thisitem.timeFrom)
  ) {
    boxclass = "blue-time";
  }
  return { class: boxclass, text: dom || "" };
  // if (type === "class") return boxclassF
  // else if (type === "text") return dom//返回生成的dom
};

const rendercc = (item, index) => {
  return `time-line-m time-line-m-${index} ${renderTimerClass(item).class}`;
};

onMounted(() => {
  leftTimeArray.value = creatTime("8:00", "24:00", 60);
  rightTimeArray.value = creatTime("8:00", "23:00", 15);
  // console.log('eeeeeeeeeee',leftTimeArray.value);
});
</script>

<template>
  <div>
    <div class="meeting-time-selector">
      <div class="time-selector-label">
        <div
          v-for="(item, index) in leftTimeArray"
          class="time-div"
          :key="index"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="time-selector-checkbox">
        <div
          v-for="(item, index) in rightTimeArray"
          :key="index"
          :class="rendercc(item, index)"
          @mousedown="
            () => {
              handleChooseTime(item);
            }
          "
        >
          {{ renderTimerClass(item).text }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// @import '@/assets/css/mixin.scss';

.show-time {
  max-height: 340px;
  overflow: auto;
  margin-right: -20px;
  // @include scrollBar2(var(--scrollbar-bg), var(--scrollbar-color));
}
.meeting-time-selector {
  margin-top: 20px;
  padding-right: 20px;
  display: flex;
  .ant-spin-container {
    display: flex;
  }

  .time-selector-label {
    width: 85px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: -9px;
    margin-bottom: -9px;
    .time-div {
      position: relative;
      top: 1px;
      &::after {
        position: absolute;
        right: 0;
        top: 10px;
        content: "";
        width: 4px;
        height: 1px;
        background-color: #b5b5b8;
      }
    }
  }

  .green:hover {
    opacity: 0.7;
  }

  .time-selector-checkbox {
    .time-line-m {
      width: 458px;
      height: 24px;
      opacity: 0.56;
      background: #dedede;
      // margin-bottom: 1px;
      border-bottom: 2px solid #ccc;

      &.green {
        cursor: pointer;
      }
    }

    .text-dom {
      // color: #3377ff;
      color: black;
      line-height: 18px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      span {
        cursor: default;
      }
    }
  }
}

.usecolor {
  background: #c8c8c8 !important;
}
.usecolor-border {
  // margin-bottom: 0px !important;
  border-bottom: 1px solid #c8c8c8 !important;
}
.green {
  background-color: #9eeac4 !important;
}
.blue-time {
  background-color: rgb(112, 122, 160) !important;
}
.hui {
  background: #ececec;
}
</style>
